<template>
    <div class="container">
      <div class="title">护栏碰撞告警</div>
      <div class="content-container">
        <img class="img-invade" :class="{'img-fade': isInvade}" :src="imgInvade" alt="">
        <div class="tip-invade">{{tipInvade}}</div>
      </div>
    </div>
</template>

<script>

  import _ from 'lodash'
  import $ from 'jquery'
  import * as Constant from './common/Constant'

  let imgWarn = require('../assets/invade-warn.png')
  let imgPeace = require('../assets/invade-peace.png')

    export default {
        name: 'InvadeAlarm',
        props:["isInvade"],
        data() {
            return {

            }
        },
        computed: {
          imgInvade(){
            return this.isInvade?imgWarn: imgPeace;
          },
          tipInvade(){
            return this.isInvade?'当前状态：入侵':'当前状态：正常';
          }
        },
        methods: {
          getData(){

          }
        },
        mounted() {

        },
        created() {

        }
    }
</script>

<style lang="stylus" scoped>

  @keyframes fade
    from
      opacity 1;
    to
      opacity 0.3

  .content-container
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .img-invade
      width: 100px;
      height: 72px;
    .img-fade
      animation: fade .3s infinite alternate
    .tip-invade
      margin-top: 12px;
      opacity: 0.8;
      font-weight: bold;
      font-size: 14px;
      color: #FFFFFF;
      letter-spacing: 0.12px;
      text-align: center;
</style>
